<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>邮件信息列表</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1000px;
            margin: 50px auto;
            padding: 0 20px;
        }

        /* 标题样式 */
        h1 {
            text-align: center;
            color: #3a7d44;
            margin-bottom: 30px;
            font-weight: 600;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 30px;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            overflow: hidden;
        }

        th, td {
            padding: 15px;
            text-align: center;
            vertical-align: middle;
        }

        thead {
            background-color: #f5f5f5;
        }

        th {
            font-weight: 600;
            color: #333;
            border-bottom: 1px solid #e0e0e0;
        }

        tbody tr {
            border-bottom: 1px solid #f0f0f0;
            transition: transform 0.2s ease;
        }

        tbody tr:hover {
            background-color: #f9f9f9;
            transform: translateY(-2px);
        }

        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            margin: 0 5px;
        }

        .btn:hover {
            background-color: #388e3c;
            transform: translateY(-2px);
        }

        .btn-danger {
            background-color: #f44336;
        }

        .btn-danger:hover {
            background-color: #d32f2f;
        }

        .btn-primary {
            background-color: #2196f3;
        }

        .btn-primary:hover {
            background-color: #1976d2;
        }

        /* 操作列样式 */
        .actions {
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        /* 按钮组样式 */
        .button-group {
            display: flex;
            justify-content: center;
            margin-top: 40px;
            gap: 15px;
        }

        .button-group .btn {
            padding: 10px 20px;
            font-size: 15px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                margin: 30px 15px;
            }

            table {
                font-size: 14px;
            }

            th, td {
                padding: 12px 8px;
            }

            .button-group {
                flex-direction: column;
                align-items: center;
            }

            .button-group .btn {
                width: 100%;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>

<div class="container">

    <h1>邮件信息列表</h1>

    <table>
        <thead>
        <tr>
            <th>邮箱地址</th>
            <th>注册时间</th>
            <th>发件人</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 假设使用 Thymeleaf 模板引擎进行数据绑定 -->
        <tr th:each="email : ${emails}">
            <td th:text="${email.email}" >user@example.com</td>
            <td th:text="${email.createdAt}">2024-01-01 12:00:00</td>
            <td th:text="${email.sendperson}">admin@example.com</td>
            <td class="actions">
                <a th:href="@{/email/delete/{id}(id=${email.id})}" class="btn btn-danger">删除</a>
                <a th:href="@{/email/select/{id}(id=${email.id})}" class="btn btn-primary">查看</a>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="button-group">
        <a th:href="@{/user/index}" class="btn">返回首页</a>
    </div>

</div>

</body>
</html>